<template>
  <view>
    <!-- 服务器状态显示 - 美化版 -->
    <view class="server-status-card">
      <view class="status-content">
        <view class="status-left">
          <view :class="['status-indicator', serverStatus]">
            <view class="status-dot"></view>
            <view v-if="serverStatus === 'connected'" class="status-pulse"></view>
          </view>
          <view class="status-text-wrapper">
            <text class="status-label">{{ statusText }}</text>
            <text v-if="networkInfo" class="network-info">{{ networkInfo }}</text>
          </view>
        </view>
        <view class="status-right">
          <view 
            class="refresh-button" 
            @click="handleRefresh" 
            :class="{ 'refreshing': isRefreshing }"
          >
            <svg 
              class="refresh-icon" 
              viewBox="0 0 24 24" 
              fill="none" 
              xmlns="http://www.w3.org/2000/svg"
            >
              <path 
                d="M4 4V9H4.58152M19.9381 11C19.446 7.05369 16.0796 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9M4.58152 9H9M20 20V15H19.4185M19.4185 15C18.2317 17.9318 15.3574 20 12 20C7.92038 20 4.55399 16.9463 4.06189 13M19.4185 15H15" 
                stroke="currentColor" 
                stroke-width="2" 
                stroke-linecap="round" 
                stroke-linejoin="round"
              />
            </svg>
          </view>
        </view>
      </view>
    </view>
      
    <!-- 环境信息显示（仅开发环境显示） - 美化版 -->
    <view v-if="showEnvInfo" class="env-info-card">
      <view class="env-icon">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path 
            d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" 
            stroke="currentColor" 
            stroke-width="2" 
            stroke-linecap="round" 
            stroke-linejoin="round"
          />
          <path 
            d="M19.6226 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H11.0647L10.4422 4.36974L7.73526 5.48295L6 4L4 6L5.47527 7.7448L4.37741 10.3954L2 11V13L4.37741 13.6046L5.47527 16.2552L4 18L6 20L7.73526 18.517L10.4422 19.6303L11.0647 22H12.9353L13.5578 19.6303L16.2647 18.517L18 20L20 18L18.5247 16.2552L19.6226 13.6046L22 13V11L19.6226 10.3954Z" 
            stroke="currentColor" 
            stroke-width="2" 
            stroke-linecap="round" 
            stroke-linejoin="round"
          />
        </svg>
      </view>
      <text class="env-label">{{ envInfo.environment }} | {{ envInfo.platform }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ServerStatus',
  props: {
    serverStatus: {
      type: String,
      default: 'unknown'
    },
    statusText: {
      type: String,
      default: '未知'
    },
    networkInfo: {
      type: String,
      default: ''
    },
    isRefreshing: {
      type: Boolean,
      default: false
    },
    showEnvInfo: {
      type: Boolean,
      default: false
    },
    envInfo: {
      type: Object,
      default: () => ({
        environment: '',
        platform: ''
      })
    }
  },
  methods: {
    handleRefresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style scoped>
/* 服务器状态卡片 - 美化版 */
.server-status-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08), 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20rpx);
  position: relative;
  overflow: hidden;
}

.server-status-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  opacity: 0.6;
}

.status-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
}

.status-indicator {
  position: relative;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.status-pulse {
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-indicator.connected .status-dot {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 0 20rpx rgba(16, 185, 129, 0.6), 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.status-indicator.connected .status-pulse {
  background: rgba(16, 185, 129, 0.3);
  border: 2rpx solid rgba(16, 185, 129, 0.5);
}

.status-indicator.disconnected .status-dot {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 0 20rpx rgba(239, 68, 68, 0.6), 0 4rpx 12rpx rgba(239, 68, 68, 0.3);
}

.status-indicator.disconnected .status-pulse {
  background: rgba(239, 68, 68, 0.3);
  border: 2rpx solid rgba(239, 68, 68, 0.5);
}

.status-indicator.unknown .status-dot,
.status-indicator.checking .status-dot {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 20rpx rgba(245, 158, 11, 0.6), 0 4rpx 12rpx rgba(245, 158, 11, 0.3);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.status-indicator.unknown .status-pulse,
.status-indicator.checking .status-pulse {
  background: rgba(245, 158, 11, 0.3);
  border: 2rpx solid rgba(245, 158, 11, 0.5);
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

.status-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.status-label {
  font-size: 28rpx;
  color: #1f2937;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5rpx;
}

.network-info {
  font-size: 22rpx;
  color: #6b7280;
  font-weight: 400;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

/* 刷新按钮 - 美化版 */
.refresh-button {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 2rpx solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
  position: relative;
  overflow: hidden;
}

.refresh-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.refresh-button:active::before {
  width: 100%;
  height: 100%;
}

.refresh-button:active {
  transform: scale(0.92);
  box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.2);
}

.refresh-button.refreshing {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: rgba(59, 130, 246, 0.4);
}

.refresh-icon {
  width: 32rpx;
  height: 32rpx;
  color: #3b82f6;
  transition: all 0.3s ease;
}

.refresh-button.refreshing .refresh-icon {
  animation: spin 0.8s linear infinite;
  color: #2563eb;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 环境信息卡片 - 美化版 */
.env-info-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(229, 231, 235, 0.8);
  display: flex;
  align-items: center;
  gap: 12rpx;
  backdrop-filter: blur(10rpx);
}

.env-icon {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  flex-shrink: 0;
}

.env-icon svg {
  width: 100%;
  height: 100%;
}

.env-label {
  font-size: 22rpx;
  color: #4b5563;
  font-weight: 500;
  letter-spacing: 0.3rpx;
}
</style>

